<style scoped>
.layout {
  background:#505458;
  color: white;
  position: relative;
  overflow: hidden;
  font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB",
    "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
  height: 100%;
}

.el-header {
  background-color: #505458;
  line-height: 60px;
}

</style>
<template>
  <div class="layout">
    <el-container :style="'height:' + height + 'px;'">
      <el-aside  width="200px" style="background-color:black;height: 100%">
        <el-menu
          default-active="0-1"
          theme="dark"
          background-color="black"
          text-color="#fff"
          active-text-color="#ffd04b"
          v-bind:router="true"
          @open="opentab"
          :unique-opened="true"
        >
        <el-submenu :index="menu.index" v-for="(menu,index) in menus">
          <template slot="title">
            <i class="el-icon-menu"></i>
            {{menu.name}}
          </template>
          <el-menu-item-group   v-bind:route="index" v-bind:index="index">
            <el-menu-item
              v-bind:route="submenus.href"
              v-bind:index="index + '-' + index2" v-for="(submenus,index2) in menu.submenu">
              {{submenus.name}}
            </el-menu-item>
          </el-menu-item-group>
        </el-submenu>
        </el-menu>
      </el-aside>

      <el-container>
        <el-header style="height: 56px;line-height: 60px;background-color: black;  ">
          <el-row style="height: 56px">
            <el-col :span="4" style="height:56px">
              <el-breadcrumb separator="/">
                <el-breadcrumb-item
                  style="float:left;margin-top: 25px;color: white"
                  v-for="(item,index) in levelListComputed"
                  v-if="item.name"
                >
                  <a :href="item.url">{{item.name}}</a>
                </el-breadcrumb-item>
              </el-breadcrumb>
            </el-col>
            <el-col :span="20" style="text-align: right; font-size: 12px;height:56px">
              <el-dropdown @command="handleClickUserDropdown">
                <span class="el-dropdown-link">
                  管理员
                  <i class="el-icon-arrow-down el-icon--right"></i>
                </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item command="ownSpace">个人中心</el-dropdown-item>
                  <el-dropdown-item command="loginout" divided>退出登录</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
              <span>{{userInfo.UserName}}</span>
              <i class="el-icon-user-solid"></i>
            </el-col>
          </el-row>
        </el-header>
        <el-main  style="background:#303133">
          <router-view ></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import Vue from 'vue';
import axios from "@/api/ajax";
import Cookie from "js-cookie";
import Const from "@/const";
import  Menu from "element-ui/lib/menu";
import MenuItem from "element-ui/lib/menu-item";
import MenuGroup from "element-ui/lib/menu-item-group";
import DropDown from "element-ui/lib/dropdown";
import DropDownMenu from "element-ui/lib/dropdown-menu";
import DropDownItem from "element-ui/lib/dropdown-item";
import Container from "element-ui/lib/container";
import Aside from "element-ui/lib/aside";
import Header from "element-ui/lib/header";
import Row from "element-ui/lib/row";
import Col from "element-ui/lib/col";
import Main from "element-ui/lib/main";
import BreadThumb from "element-ui/lib/breadcrumb";
import BreadThumbItem from "element-ui/lib/breadcrumb-item";
import Submenu from "element-ui/lib/submenu";
import VueMavonEditor from "mavon-editor";
import  Message from "element-ui/lib/message"
Vue.use(Message);

import "mavon-editor/dist/css/index.css";
Vue.use(VueMavonEditor);
Vue.use(Container);
Vue.use(Aside);
Vue.use(Col);
Vue.use(MenuGroup);
Vue.use(Submenu);
Vue.use(BreadThumb);
Vue.use(Main);
Vue.use(Row);
Vue.use(Menu);
Vue.use(MenuItem);
Vue.use(DropDownMenu);
Vue.use(Header);
Vue.use(DropDown);
Vue.use(BreadThumbItem);
Vue.use(DropDownItem);


export default {
    components: {
      Container,
      Aside,
      Message,
      Col,
      MenuGroup,
      Submenu,
      BreadThumb,
      BreadThumbItem,
      Main,
      Row,
      Menu,
      DropDownItem,
      MenuItem,
      DropDownMenu,
      Header,
      DropDown,
  },
  computed: {
    levelListComputed: function() {
      let matched = this.$route.matched.filter(item => item.name);
      return matched;
    }
  },
  data: function() {
    return {
      curIndex:0,
      timer: null,
      items: [],
      userInfo: {},
      levelList: null,
      current: {},
      iter: 1,
      width : 1024,
      height : 800,
      menus: [
        {
          name: "基础功能",
          icon: "",
          index: "0",
          submenu: []
        },
        {
          name: "二期功能",
          icon: "",
          index:"1",
          submenu: []
        }
      ]
    };
  },
  name: "SideBarView",
  mounted(){
    this.height = this.findDimensions().height;
  },
  watch:{
      fullHeight(val) {
        if(!this.timer){
          this.height = val
          this.timer = true
          let that = this
          setTimeout(function () {
            this.timer = false
          },400)
        }
    }
  },
  created() {
    this.$router.options.routes[1].children.forEach(route => {
      this.menus[0].submenu.push({
        name: route.name,
        href: "/BarIView/" + route.path.split("/:", 2)[0]
      });
    });

    this.$router.options.routes[2].children.forEach(route => {
      this.menus[1].submenu.push({
        name: route.name,
        href: "/BarIView/" + route.path.split("/:", 2)[0]
      });
    });

    if (userInfo === undefined) {
      this.$router.push("/login");
    } else {
      this.userInfo = userInfo;
      //console.log(userInfo);
    }
  },
  methods: {
    opentab(index,indexPath){
      console.log(index,indexPath)
    },
    findDimensions() //函数：获取尺寸
    {
      var point = {};
      //获取窗口宽度
      window.innerWidth && (point.width = window.innerWidth);
      window.innerHeight && (point.height = window.innerHeight);
      return point;
    },
    handleClickUserDropdown(name) {
      if (name === "loginout") {
        let url = "/logout";
        let userInfo = Cookie.get("userInfo");
        let obk = JSON.parse(userInfo);
        console.log(obk['SocketToken']);
        axios
          .get(url+"/"+obk['SocketToken'])
          .then(function(resp) {
            Cookie.remove(Const.KEY_USER_INFO);
          })
          .catch(reason => {
            Message.error(reason);
          });
        this.$router.push("/login");
      }
    },
    getBreadcrumb() {
      let matched = this.$route.matched.filter(item => item.name);
      const first = matched[0];
      this.levelList = matched;
    }
  }
};
</script>

<style scoped>
.el-aside {
  background-color: #d3dce6;
  color: #333;
  text-align: center;
  line-height: 200px;
}
.el-breadcrumb__inner a {
  color: white;
}
.el-breadcrumb__inner .is-link {
  color: white;
}
.el-dropdown {
  color: white;
}
.el-breadcrumb__item:last-child .el-breadcrumb__inner,
.el-breadcrumb__item:last-child .el-breadcrumb__inner a,
.el-breadcrumb__item:last-child .el-breadcrumb__inner a:hover,
.el-breadcrumb__item:last-child .el-breadcrumb__inner:hover {
  color: white;
}
</style>
